<template>
  <div class="search">
    <div class="search_con">
      <input type="search"
             placeholder="请输入商家或美食名称"
             v-model="keyw">
      <input type="submit"
             class="button"
             @click="resAction">
    </div>

    <div class="search_result1"
         v-if="show == 2">
      <p>很抱歉！暂无搜索结果</p>
    </div>

    <div class="search_result"
         v-if="show == 1">
      <h4>商家</h4>
      <ul>
        <li v-for="(item,index) in resu"
            :key="index"
            @click="getnum(index)">
          <div class="item_l">
            <img :src="url+item.image_path"
                 alt="">
          </div>
          <div class="item_r">
            <p>
              <span class="shop_name">{{item.name}}</span>
              <span class="pay">支付</span>
            </p>
            <p>月售{{item.recent_order_num}}单</p>
            <p>{{item.float_minimum_order_amount}}元起送 / 距离{{item.distance}}公里</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Search',
  data: function () {
    return {
      keyw: '',
      resu: [],
      url: '//elm.cangdu.org/img/',
      show: 0,
    }
  },
  methods: {
    resAction () {
      let geohash = localStorage.getItem('geohash');
      this.$axios.get('https://elm.cangdu.org/v4/restaurants', {
        params: {
          keyword: this.keyw,
          geohash: geohash
        }
      }).then(res => {
        // console.log(res);
        this.resu = res.data;
        console.log(this.resu);
        if (res.data.length > 0) {
          this.show = 1;
        } else {
          this.show = 2;
        }
      }).catch(err => console.log(err));
    },
    getnum (index) {
      console.log(this.resu[index].id);
      localStorage.setItem('shopid', this.resu[index].id);
      this.$router.push({ name: 'Shop' });
    },
  },
}
</script>

<style lang="less">
.search {
  height: 667px;
  background-color: #f5f5f5;
  .search_con {
    background-color: white;
    padding: 12px;
    border-bottom: 1px solid #ccc;

    input[type="search"] {
      background-color: #f5f5f5;
      width: 270px;
      height: 35px;
      border: 1px solid #e4e4e4;
      outline: none;
      border-radius: 5px;
      padding: 0 6px;
      box-sizing: border-box;
      margin-right: 3px;
      font-weight: 700;
      font-size: 16px;
    }
    .button {
      width: 77px;
      height: 35px;
      background-color: #3190e8;
      color: white;
      font-weight: 700;
      border-radius: 5px;
      border: none;
      outline: none;
      font-size: 16px;
    }
  }

  .search_result {
    h4 {
      font-size: 16px;
      color: #666;
      font-weight: 700;
      padding-left: 10px;
      line-height: 46px;
    }
    ul {
      // padding-left: 10px;
      background-color: white;

      li {
        display: flex;
        background-color: white;
        padding: 15px;
        border-bottom: 0.1px solid #e4e4e4;

        .item_l {
          img {
            width: 40px;
            height: 40px;
            margin-right: 10px;
          }
        }

        .item_r {
          padding-bottom: 15px;
          border-bottom: 0.1px solid #e4e4e4;
          p {
            font-size: 14px;
            color: #333;
            line-height: 20px;
          }
          .shop_name {
            font-size: 14px;
          }

          .pay {
            font-size: 12px;
            color: rgb(255, 96, 0);
            font-weight: bold;
            border: 1px solid;
          }
        }
      }
    }
  }
  .search_result1 {
    p {
      text-align: center;
      font-size: 16px;
      background-color: white;
      color: #999;
      line-height: 40px;
    }
  }
}
</style>
